<!--楼层的公用板块-->
<template>
  <div class="Floor">
    <div class="title">
      <h1>
        <span class="icon iconfont" :class="floor.iconimg"></span>
        <span class="iconfont" style="font-weight:normal;font-size:20px;">{{icon}}</span>
        <span>{{floor.name}}</span>
      </h1>
      <i @click="jumpcategory(floor.id)">查看更多 +</i>
    </div>

    <div class="content">
      <div class="contentLeft">
        <img :src="pic">
      </div>

      <ul class="contentRight">
        <li
          v-for="item in floor.data"
          :key="item.id"
          class="goods"
          @click="jumpdetails(item.id, item.pid, item)"
        >
          <img :src="item.image?item.image:defaultNoImage" :onerror="defaultImg">
          <div>
            <p>{{item.name}}</p>
            <p>
              <span>￥{{item.price}}</span>
              <del>￥{{item.old_price}}</del>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import ADLeft from "../../../assets/images/ADLeft01.png"
import goods from "../../../assets/images/goods1.png"
import loading from '@/assets/logo/loading.png'
export default {
  name: "homeFloor",
  props: {
    pic: String,
    floor: Object,
    icon: String
  },
  data() {
    return {
      defaultNoImage: require('../../../assets/logo/loading.png'),
      defaultImg: 'this.src="' + require('../../../assets/logo/loading.png') + '"',
    }
  },
  methods: {
    // 进入列表详情页面 触发左侧展开的视图
    jumpcategory(id) {
      this.$store.commit('ListTreeId', id)
      this.$router.push({
        name: "productList",
        params: {}
      })
    },

    jumpdetails(id, pid, item) {

      let temp = item
      temp.goods_title = item.name
 
      console.log(item)
      this.$router.push({
        name: "productDetails",
        params: {
          id,
          pid,
          item:temp
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.Floor {
  width: 1200px;
  margin: auto;
  padding-top: 10px;
  .title {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    h1 {
      font-size: 20px;
      span:first-child {
        color: #1f60cd;
        font-size: 20px;
        font-weight: normal;
        padding-left: 10px;
      }
    }
    i {
      width: 90px;
      height: 20px;
      border-radius: 20px;
      color: #fff;
      text-align: center;
      font-size: 12px;
      line-height: 20px;
      margin-right: 10px;
      cursor: pointer;
      background: linear-gradient(
        to right,
        #007ee6,
        #392ba7
      ); /* 标准的语法（必须放在最后） */

      &:hover {
        background: linear-gradient(
          to right,
          #392ba7,
          #007ee6
        ); /* 标准的语法（必须放在最后） */
      }
    }
  }
  .content {
    width: 1200px;
    height: 442px;
    display: flex;
    flex-direction: row;
    .contentLeft {
      width: 228px;
      height: 442px;
      background-color: royalblue;
      img {
        width: 228px;
        height: 442px;
      }
    }
    .contentRight {
      width: 972px;
      height: 440px;
      border-top: 2px solid #0a83e7;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      li {
        width: 193.4px;
        height: 219px;
        border-bottom: 1px solid #d0d0d0;
        border-right: 1px solid #d0d0d0;
        cursor: pointer;
        // &:hover img {
        //   opacity: 0.8;
        // }
        img {
          width: 112px;
          height: 112px;
          margin-left: 40.7px;
          margin-top: 10px;
          transition: 0.3s all ease-out;
          &:hover {
            opacity: 0.8;
          }
        }
        .img-err {
          width: 112px;
          height: 112px;
          margin-left: 40.7px;
          margin-top: 10px;
          background: url("../../../assets/logo/loading.png") no-repeat;
          background-size: 100% 100%;
        }
        p {
          box-sizing: border-box;
          font-size: 14px;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #333;
          padding: 010px;
          // &:last-child {
          //   // margin-top: 10px;
          // }
          span {
            color: #fe2121;
            font-size: 18px;
            padding-right: 10px;
            font-weight: 700;
          }
          del {
            color: #a3a3a3;
            font-size: 14px;
            // text-decoration:line-through;
          }
        }
        &:first-child {
          width: 387px;
          display: flex;
          flex-direction: row;

          div {
            padding-top: 60px;
            p {
              width: 179px;
              font-size: 14px;
              text-align: center;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              &:last-child {
                margin-top: 10px;
              }
              span {
                color: #fe2121;
                font-size: 18px;
                padding-right: 10px;
                font-weight: 700;
              }
              del {
                color: #a3a3a3;
                font-size: 14px;
                // text-decoration:line-through;
              }
            }
          }
          img {
            margin-left: 20px;
            margin-top: 15.5px;
            width: 188px;
            height: 188px;
          }
        }
      }
      // .TBBIG{
      //     width: 387px;
      //     display: flex;
      //     flex-direction: row;
      //     .imgpic{
      //         width: 208px;
      //         height: 219px;
      //         position: relative;
      //         span{
      //             display: block;
      //             width: 64px;
      //             height: 64px;
      //             border-radius: 50%;
      //             background: #ff9000;
      //             position: absolute;
      //             top: 34px;
      //             left: 34px;
      //             text-align: center;
      //             line-height: 64px;
      //             color: #fff;
      //             font-size: 16px;
      //             font-weight: 800;

      //         }
      //         img{
      //             margin-left: 20px;
      //             margin-top: 15.5px;
      //             width: 188px;
      //             height: 188px;
      //         }
      //     }
      //     .describe{
      //         width: 148px;
      //         text-align: center;
      //         p{
      //             font-size: 16px;
      //             overflow: hidden;
      //             white-space: nowrap;
      //             text-overflow: ellipsis;
      //             &:nth-child(1){
      //                 margin-top: 34px;
      //             }
      //             &:nth-child(3){
      //                 color: #919191;
      //                 font-size: 14px;
      //                 line-height: 28px;
      //             }
      //             &:nth-child(4){
      //                 color: #fe2121;
      //                 font-size: 16px;
      //                 font-weight: 800;
      //                 line-height: 38px;
      //             }
      //              &:nth-child(5){
      //                 width: 76px;
      //                 margin: auto;
      //                 margin-top: 10px;
      //                 text-align: center;
      //                 border-radius: 5px;
      //                 color: #fff;
      //                 font-size: 12px;
      //                 font-weight: 800;
      //                 line-height: 24px;
      //                 background: linear-gradient(to right, #007ee6 , #392ba7); /* 标准的语法（必须放在最后） */
      //             }
      //         }
      //     }
      // }
    }
  }
}
</style>
